<template>
    <div class="h-full">
        <div class="flex h-full bg-black">
            <div class="flex-1 relative">
                <img class="object-cover h-full w-full pointer-events-none blur-[1px]" src="./assets/bg1.jpg" alt="">
                <div class="absolute bottom-[126px] left-[140px] text-white z-10 font-bold text-6xl leading-[84px]"
                     style="text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);">全面助力物业企业<br>构建信息化、数字化管理平台</div>
            </div>
            <div class="flex-none w-[600px] relative flex flex-col justify-center" style="background: #37393D;">
                <img class="absolute top-0 right-0 pointer-events-none" src="./assets/Ellipse.svg" alt="">
                <div class="flex-1"></div>
                <div class="flex-none flex flex-col text-white mx-[125px] z-10">
                    <div class="text-2xl">欢迎回来</div>
                    <div class="font-bold text-3xl leading-[42px] mb-[49px]">登录你的账号</div>
                    <div class="mb-2">用户名</div>
                    <input class="mb-4" type="text" placeholder="请输入用户名" v-model="loginForm.username">
                    <div class="mb-2">密码</div>
                    <el-input class="mb-2" type="password" show-password placeholder="请输入密码"
                              v-model="loginForm.password"></el-input>
                    <div style="font-size: 12px; color: #FBE5BB;" :style="{ opacity: error ? '1' : '0' }">
                        <img src="./assets/error.svg" alt="">
                        {{ error && error.message }}
                    </div>
                    <el-popover v-model="isCaptchaVisible" placement="top" trigger="click">
                        <SliderCaptcha v-if="isCaptchaVisible" @success="handleLogin"/>
                        <button slot="reference" class="w-full h-[48px] mt-6 overflow-hidden" v-loading="loading">登 录</button>
                    </el-popover>
                </div>
                <div class="flex-1"></div>
                <div class="leading-6 text-center mb-[62px] flex-none font-normal" style="color: #F0F1F5;">
                    Copyright © 2022 智慧一网统管平台 - <a class="hover:underline"
                       href="https://beian.miit.gov.cn/">鄂ICP备19023079号-1</a></div>
            </div>
        </div>

    </div>
</template>

<script>
import SliderCaptcha from './SliderCaptcha.vue'

export default {
    name: 'index',
    components: { SliderCaptcha },
    data() {
        return {
            loginForm: {
                clientId: '',
                username: '',
                password: ''
            },
            loading: false,
            redirect: undefined,
            error: null,
            isCaptchaVisible: false
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true,
        }
    },
    methods: {
        handleLogin(id) {
            this.isCaptchaVisible = false
            if (!this.loginForm.username) {
                this.$message.error({
                    message: '登录名不可以为空,请输入正确的信息!',
                    center: true,
                    duration: 2000
                })
                this.error = new Error('登录名不可以为空,请输入正确的信息!')
                return
            }
            if (!/^.{8,}$/.test(this.loginForm.password)) {
                this.$message.error({
                    message: '密码不可以为空或少于8位!',
                    center: true,
                    duration: 2000
                })
                this.error = new Error('密码不可以为空或少于8位!')
                return
            }
            this.loginForm.clientId = id
            this.error = null
            localStorage.setItem('username', this.loginForm.username)
            this.loading = true
            this.$store
                .dispatch('user/login', this.loginForm)
                .then(() => {
                    this.$router.push({ path: this.redirect || '/' })
                    this.loading = false
                })
                .catch(error => {
                    this.error = error
                    this.loading = false
                })
        }
    }
}
</script>

<style scoped>
:deep input {
    background-color: transparent;
    color: white;
    outline: none;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    height: 46px;
    line-height: 46px;
    padding: 0 20px;
    font-size: 14px;
}

:deep input:focus {
    border-color: #FBE5BB;
}

:deep input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

button {
    color: #333D4F;
    font-weight: 700;
    height: 48px;
    background: #FBE5BB;
    border-radius: 4px;
    letter-spacing: 0.1em;
}

button:active {
    background: #FADA9E;
}
</style>